<template>
  <div class="wrapp">
    <div class="head">
      <div class="title">用户管理补贴</div>
      <span style="margin-right:10px;">{{getParams.name}}</span>
      <span>{{getParams.mobile}}</span>
    </div>
    <div class="banner">
      <div class="item">
        <span style="font-size:20px;">Storj</span>
        <Button type="primary" style="margin-right:10px" @click="addCyc">新增周期</Button>
      </div>
      <div class="table">
        <Table :columns="columnsDataStorj" :data="StorjShowData" :border="true" :loading="isStorjLoading">
          <template slot-scope="{ row, index }" slot="subsidyAmount">
            <Input type="text" v-model="editsubsidyAmount" v-if="editIndex === index" />
            <span v-else style="border-bottom:1px solid">{{ row.subsidyAmount }}</span>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <div v-if="editIndex === index">
              <Button style="margin-right: 5px;" type="primary" @click="handleSave(row,index)">保存</Button>
              <Button @click="editIndex = -1">取消</Button>
            </div>
            <div v-else>
              <Button style="margin-right: 5px;" @click="handleEdit(row, index)" v-if="row.statusName=='未执行'">编辑</Button>
              <Button style="margin-right: 5px;" @click="handleEdit(row, index)" v-else disabled>编辑</Button>
            </div>
          </template>
        </Table>
        <Page :total="pageTotalStorj" :current="pageNumStorj" :page-size="pageSizeStorj" show-total placement="top" @on-change="handlePageStorj" style="margin-top:20px;"></Page>
      </div>
    </div>
  </div>
</template>

<script>
import apis from "../../util/apis.js";

export default {
  name: "Bonus",
  data() {
    return {
      getParams: {},
      editIndex: -1,
      editsubsidyAmount: "",
      editcycleIndex: "",
      /////////////storj表格///////////
      columnsDataStorj: [
        {
          title: "周期",
          key: "cycleIndex",
          align: "center",
          width: 150
        },
        {
          title: "时间",
          key: "date",
          align: "center",
          width: 200
        },
        {
          title: "状态",
          key: "statusName",
          align: "center",
          width: 100
        },
        {
          title: "补贴数(storj)",
          key: "subsidyAmount",
          slot: "subsidyAmount",
          align: "center",
          width: 180
        },
        {
          title: "设置补贴",
          slot: "action",
          align: "center",
          width: 180
        }
      ],
      StorjShowData: [],
      pageTotalStorj: 0,
      pageNumStorj: 1,
      pageSizeStorj: 10,
      isStorjLoading: false,
      cycIndex: "",
      bonus: ""
    };
  },
  methods: {
    //token过期检测
    tokenCheck() {
      this.token = this.$localStorage.storageGet("TOKEN");
      if (!this.token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
    },
    /////////////////Storj补贴列表////////////////////////
    SjData(pageNumStorj) {
      this.tokenCheck();
      this.isStorjLoading = true;
      let url = "";

      url =
        apis.SJbonusList +
        "/" +
        this.getParams.userId +
        "?" +
        "page=" +
        pageNumStorj +
        "&size=" +
        this.pageSizeStorj;

      this.$axios({
        method: "get",
        url: url,
        headers: {
          Authorization: "Bearer " + this.token
        }
      })
        .then(res => {
          console.log(res);
          if (res.status == 200) {
            this.isStorjLoading = false;
            this.StorjShowData = res.data;
            this.pageTotalStorj = parseInt(res.headers["x-total-count"]);
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },

    /////////////////节点补贴数设置////////////////////////
    handleSave(row, index) {
      this.editIndex = -1;
      let cycleIndex = row.cycleIndex;
      let id = row.id;

      let subsidyAmount = parseFloat(this.editsubsidyAmount);

      this.$Modal.confirm({
        title: "确认信息",
        // content: content_1,
        content:
          "<div>用户《" +
          this.getParams.name +
          "》正在修改第" +
          "<span style='color:red'>" +
          this.editcycleIndex +
          "</span>" +
          "周期的节点补贴数为:" +
          this.editsubsidyAmount,
        onOk: () => {
          this.tokenCheck();
          let url = "";
          url =
            apis.addCyc +
            "?" +
            "cycleIndex=" +
            cycleIndex +
            "&subsidyAmount=" +
            subsidyAmount +
            "&id=" +
            id +
            "&userId=" +
            this.getParams.userId;

          this.$axios({
            method: "post",
            url: url,
            headers: {
              Authorization: "Bearer " + this.token
            }
          })
            .then(res => {
              if (res.status == "200") {
                this.SjData(this.pageNumStorj - 1);
              } else {
                this.$Message.error(res.data.detail);
              }
            })
            .catch(err => {
              this.$Message.error(err.response.data.message);
            });
        },
        onCancel: () => {
          this.$Message.info("已取消");
        }
      });
    },
    handleEdit(row, index) {
      this.editIndex = index;
      this.editsubsidyAmount = row.subsidyAmount;
      this.editcycleIndex = row.cycleIndex;
    },
    ////////////////新增周期/////////////////////////
    addCyc() {
      this.$Modal.confirm({
        render: h => {
          return h("div", [
            h("h2", "设置周期信息"),
            h(
              "span",
              {
                style: {
                  marginBottom: "5px",
                  display: "block"
                }
              },
              "请输入周期："
            ),
            h("Input", {
              props: {
                value: this.cycIndex,
                autofocus: true,
                placeholder: "请输入需要设置周期数"
              },

              on: {
                input: val => {
                  this.cycIndex = val;
                }
              }
            }),
            h(
              "span",
              {
                style: {
                  marginTop: "10px",
                  marginBottom: "5px",
                  display: "block"
                }
              },
              "请输入节点补贴数："
            ),
            h("Input", {
              props: {
                value: this.bonus,
                autofocus: true,
                placeholder: "请输入需要设置的节点补贴数"
              },
              on: {
                input: val => {
                  this.bonus = val;
                }
              }
            })
          ]);
        },
        onOk: () => {
          this.projectConfigAction();
        }
      });
    },
    projectConfigAction() {
      this.tokenCheck();
      let url = "";
      url =
        apis.addCyc +
        "?" +
        "cycleIndex=" +
        this.cycIndex +
        "&subsidyAmount=" +
        this.bonus +
        "&userId=" +
        this.getParams.userId;

      this.$axios({
        method: "post",
        url: url,
        headers: {
          Authorization: "Bearer " + this.token
        }
      })
        .then(res => {
          if (res.status == "200") {
            this.SjData(this.pageNumStorj - 1);
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    handlePageStorj(value) {
      this.pageNumStorj = value;
      this.SjData(this.pageNumStorj - 1);
    }
  },
  created() {},
  mounted() {
    this.getParams = this.$route.query.param;
    console.log(this.getParams);
    this.SjData(0);
  }
};
</script>

<style scoped>
.wrapp {
  padding: 0 20px;
}

.head {
  border-bottom: 1px solid;
  padding: 10px 5px;
}

.head span {
  font-size: 16px;
}

.banner {
  margin-top: 20px;
}

.title {
  color: #666;
  font-size: 24px;
  margin-right: 20px;
  display: inline;
}

.table {
  margin-top: 20px;
}
.labelItem {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
}
.item {
  display: flex;
  justify-content: space-between;
}
</style>